$--color-going: #337DFF;
$--color-going-background: #E1ECFF;
$--color-success: #10C038;
$--color-success-background: #EDF8E8;
$--color-danger: #F04134;
$--color-danger-background:#FFF2F1;
$--color-warning: #FF931D ;
$--color-warning-background:#FEF9ED;
$--color-info: #75849B;
$--color-info-background: #E9EDF2 ;

.el-tag {
  padding: 0 20px;
  border-radius: 2px !important;
  font-size: $--nav-font-size;

  &.el-tag--medium {
    height: 32px;
    line-height: 32px;
  }

  &.el-tag--small {
    font-size: $--text-font-size;
    height: 20px;
    line-height: 18px;
    padding: 0 10px;
  }

  &.el-tag--light {
  
    &.el-tag--success {
      background-color: $--color-success-background;
      border-color: $--color-success;
      color: $--color-success;
    }
  
    &.el-tag--info {
      background-color: $--color-info-background;
      border-color: $--color-info;
      color: $--color-info;
    }
  
    &.el-tag--warning {
      background-color: $--color-warning-background;
      border-color: $--color-warning;
      color: $--color-warning;
    }
  
    &.el-tag--danger {
      background-color: $--color-danger-background;
      border-color: $--color-danger;
      color: $--color-danger;
    }
  }

  &.el-tag--dark {
  
    &.el-tag--success {
      background-color: $--color-success;
      border-color: $--color-success;
      color: #FFFFFF;
    }
  
    &.el-tag--info {
      background-color: $--color-info;
      border-color: $--color-info;
      color: #FFFFFF;
    }
  
    &.el-tag--warning {
      background-color: $--color-warning;
      border-color: $--color-warning;
      color: #FFFFFF;
    }
  
    &.el-tag--danger {
      background-color: $--color-danger;
      border-color: $--color-danger;
      color: #FFFFFF;
    }
  }
}
